<template>
  <div class="merchant-platform-container">
    <BasicTable @register="registerTable" class="table-container">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'memberName'">
          <div class="image-text">
            <Avatar :src="record.memberLogo" />
            <div class="text">
              <Tooltip :title="record.memberName">
                <span>{{ record.memberName }}</span>
              </Tooltip>
            </div>
          </div>
        </template>
        <template v-else-if="column.key === 'shopSubName'">
          <div class="image-text">
            <div class="img">
              <Image :src="record.logoUrl" width="48px" height="48px"></Image>
            </div>
            <div class="text">
              <Tooltip :title="record.shopSubName">
                <span>{{ record.shopSubName }}</span>
              </Tooltip>
            </div>
          </div>
        </template>
        <template v-else-if="column.key === 'accountUserName'">
          <div>
            <div>{{ record.accountUserName }}</div>
            <div>{{ record.mobile }}</div>
            <div>{{ record.bankCardNo }}</div>
          </div>
        </template>
        <template v-if="column.key === 'userName'">
          <div class="image-text">
            <Avatar :src="record.userAvatar" />
            <div class="text">
              <span>{{ record.userName }}</span>
              <span>{{ record.userPhone }}</span>
            </div>
          </div>
        </template>
        <template v-else-if="column.key === 'action'">
          <TableAction
            :actions="[
              record.merchantNo
                ? {
                    label: '设置',
                    onClick: () => openBind(record),
                  }
                : {},
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <Modal
      title="修改APPID绑定"
      v-model:visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleBind"
      :z-index="99999"
      :centered="true"
      ok-text="保存设置"
      :width="500"
    >
      <div style="padding: 20px">
        <Descriptions :column="1" :label-style="{ width: '100px' }">
          <DescriptionsItem label="商户号">{{ currRow?.merchantNo }}</DescriptionsItem>
          <DescriptionsItem label="APPID绑定">
            <RadioGroup v-model:value="appId">
              <Radio :value="IsBindingAppMall.NO">未绑定</Radio>
              <Radio :value="IsBindingAppMall.YES">已绑定</Radio>
            </RadioGroup>
          </DescriptionsItem>
          <DescriptionsItem label="关联组织">
            <div
              style="
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 8px;
                background-color: #f2f3f5;
                border-radius: 8px;
                min-width: 300px;
              "
            >
              <Image :src="currRow?.logoUrl" width="48px" height="48px"></Image>
              <div class="text">{{ currRow?.shopSubName }}</div>
            </div>
          </DescriptionsItem>
          <DescriptionsItem label="绑定会员信息">
            <div
              style="
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 8px;
                background-color: #f2f3f5;
                border-radius: 8px;
                min-width: 300px;
              "
            >
              <Avatar :src="currRow?.memberLogo" />
              <div style="display: flex; flex-direction: column">
                <span>{{ currRow?.memberName }}</span>
              </div>
            </div>
          </DescriptionsItem>
        </Descriptions>
      </div>
    </Modal>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { getBasicColumns } from './tableData';
  import { bindAppid, getMemberMerchantList } from '@/api/hby/merchantPlatform/index';
  import {
    Image,
    Modal,
    RadioGroup,
    Radio,
    Descriptions,
    DescriptionsItem,
    Avatar,
    Tooltip,
  } from 'ant-design-vue';
  import { MemberMerchant } from '@/api/hby/merchantPlatform/type';
  import { useMessage } from '@/hooks/web/useMessage';
  import { useRoute } from 'vue-router';
  import { IsBindingAppMall } from '@/enums/merchantPlatformEnum';
  import Dictionary from '@/utils/dictionary';
  const route = useRoute();
  const visible = ref(false);
  const confirmLoading = ref(false);
  const appId = ref<IsBindingAppMall>(IsBindingAppMall.NO);
  const { createMessage } = useMessage();
  const dicts = Dictionary.getLocalMulti([
    'organizationTypes',
    'applicationStatus',
    'isBindingAppMall',
  ]);

  const currRow = ref<MemberMerchant>();

  const openBind = (row: MemberMerchant) => {
    currRow.value = row;
    appId.value = row.appid === '1' ? IsBindingAppMall.YES : IsBindingAppMall.NO;
    visible.value = true;
  };

  const handleBind = async () => {
    try {
      await bindAppid({ id: currRow.value!.id, appId: appId.value });
      createMessage.success({ content: '绑定成功' });
      reload();
    } finally {
      visible.value = false;
      confirmLoading.value = false;
    }
  };

  const [registerTable, { reload }] = useTable({
    api: (params) => {
      params.tenantId = route.query.tenantId;
      return getMemberMerchantList(params);
    },
    columns: getBasicColumns(),
    showIndexColumn: true,
    clickToRowSelect: false,
    useSearchForm: true,
    showTableSetting: true,
    tableSetting: { fullScreen: true },
    formConfig: {
      labelWidth: 100,
      schemas: [
        {
          field: `keyWord`,
          label: `关键词`,
          component: 'Input',
          componentProps: {
            placeholder: '输入支付商户号/绑定收款信息/关联组织/账户信息',
          },
          colProps: {
            span: 6,
          },
        },
        {
          field: `organizationType`,
          label: `账户类型`,
          component: 'Select',
          componentProps: {
            fieldNames: { label: 'dictLabel', value: 'dictValue' },
            options: dicts.organizationTypes,
          },
          colProps: {
            span: 4,
          },
        },
        {
          field: `applicationStatus`,
          label: `开通状态`,
          component: 'Select',
          componentProps: {
            fieldNames: { label: 'dictLabel', value: 'dictValue' },
            options: dicts.applicationStatus,
          },
          colProps: {
            span: 4,
          },
        },
        {
          field: `bindAppid`,
          label: `APPID绑定`,
          component: 'Select',
          componentProps: {
            fieldNames: { label: 'dictLabel', value: 'dictValue' },
            options: dicts.isBindingAppMall,
          },
          colProps: {
            span: 4,
          },
        },
        {
          field: `[startTime, endTime]`,
          label: `开通时间`,
          component: 'RangePicker',
          componentProps: {
            format: 'YYYY-MM-DD HH:mm:ss',
            placeholder: ['开始时间', '结束时间'],
            showTime: { format: 'HH:mm:ss' },
          },
          colProps: {
            span: 8,
          },
        },
      ],
    },
    actionColumn: {
      width: 120,
      title: '操作',
      dataIndex: 'action',
    },
    afterFetch: (data: MemberMerchant[]) => {
      return data.map((item) => {
        return {
          ...item,
          organizationType: dicts.organizationTypes.find(
            (dictsItem) => dictsItem.dictValue == item.organizationType,
          )?.dictLabel,
          appidText: item.appid === '0' ? '暂未绑定' : '已绑定',
        };
      });
    },
  });
</script>

<style lang="less" scoped>
  .merchant-platform-container {
    .table-container {
      .image-text {
        display: flex;
        align-items: center;
        gap: 16px;

        .text {
          display: flex;
          flex-direction: column;
          flex: 1;
          span {
            align-self: self-start;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 180px;
          }
        }
      }
    }
  }
</style>
